<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10_员工列表练习</title>
</head>
<body>
<input type="text" placeholder="请输入员工姓名" id="i1">
<input type="text" placeholder="请输入员工工资" id="i2">
<input type="text" placeholder="请输入员工职位" id="i3">
<button onclick="addEmp()">点击添加员工</button>
<hr>
<table border="1px">
  <caption>员工表</caption>
  <tr>
    <th>员工姓名</th>
    <th>员工工资</th>
    <th>员工职位</th>
  </tr>
</table>
<script>
  //7.定义数组来保护用户输入的多个员工数据
  let arr=[];
  function addEmp(){
    //1.获取用户输入的值
    let uName=document.getElementById('i1').value.trim();
    let uSalary=document.getElementById('i2').value.trim();
    let uJob=document.getElementById('i3').value.trim();
    //2.对数据进行校验
    if (!uName || !uSalary || !uJob){
      alert('请填写完整信息');
      return;
    }
      console.log(uName,uSalary,uJob);

    //3.每手机到一个员工数据，就要创建一个新的表格=》tr+td*3
    let trE=document.createElement('tr');
    let nameTd=document.createElement('td');
    let salaryTd=document.createElement('td');
    let jobTd=document.createElement('td');
    nameTd.innerHTML=uName;
    salaryTd.innerHTML=uSalary;
    jobTd.innerHTML=uJob;
    //4.将船舰的td元素，添加到tr中
    trE.append(nameTd,salaryTd,jobTd);
    console.log(trE,nameTd,salaryTd,jobTd);
    //5.获取表格元素，并将准备好的tr添加到table中
    let  tableE=document.querySelector('table');
    tableE.appendChild(trE);
    //6.清空输入框
    document.getElementById('i1').value='';
    document.getElementById('i2').value='';
    document.getElementById('i3').value='';
    //8.将当前收集到的员工数据存入数组
    arr.push({
        name:uName,
        salary:uSalary,
        job:uJob
    })
      console.log(arr);
  }
</script>

</body>
</html>